import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button, Card, Input, InputNumber, Popover, notification } from 'antd';
import EditorForm from '@/components/EditorForm';
import FormCondition from '@/components/FormCondition';
import FlxButton from '@/components/FlxButton'
import { InfoCircleOutlined } from '@ant-design/icons'
import { Row, Col, Tooltip, Space } from 'antd'


const PlanForm = (props) => {
    const { dispatch, reload } = props;
    const [params, setParams] = useState({
        bindExpired: 'forever',
        bindExpiredText: '',
        grabUserType: 'anyTime',
        grabUserProtectDays
    })
    const [data, setData] = useState({})
    const [form] = Form.useForm();
    const fetchData = () => {
        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { bindExpired, grabUserType, sortValue, id, grabUserProtectDays } = e
                setData({
                    id,
                    grabUserType,
                    grabUserProtectDays,
                    bindExpired: bindExpired === 'forever' ? 'forever' : 'edit',
                    bindExpiredText: bindExpired !== 'forever' ? bindExpired : ''
                })

                setParams({
                    id,
                    grabUserType,
                    grabUserProtectDays,
                    bindExpired: bindExpired === 'forever' ? 'forever' : 'edit',
                    bindExpiredText: bindExpired !== 'forever' ? bindExpired : ''
                })

            }
        })
    }
    // 新增修改 传id修改 不传id新增=
    const fetchRoleEdit = () => {
        form.validateFields().then((values) => {
            const { bindExpiredText, id, grabUserProtectDays } = params
            const { bindExpired, grabUserType
            } = values
            dispatch({
                type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
                payload: {
                    bindExpired: bindExpired === 'forever' ? 'forever' : bindExpiredText,
                    grabUserType,
                    grabUserProtectDays: grabUserType === 'protect' ? grabUserProtectDays : '',
                    id
                },
                callback: () => {
                    fetchData()
                }
            })
        });
    };
    useEffect(() => {
        fetchData()
    }, [])
    const { bindExpired, bindExpiredText, anyTime, grabUserProtectDays, grabUserType } = params
    const formItemLayout = {
        labelCol: {
            sm: { span: 0 },
        },
        wrapperCol: {
            sm: { span: 0 },
        },
    };
    const formItems = [
        {
            label: '客户绑定有效期',
            name: 'bindExpired',
            type: 'radio',
            onChange: (e) => {
                setParams({
                    ...params,
                    bindExpired: e.target.value,
                })
            },

            select: {
                forever: '永久绑定',
                edit: <div>
                    <Space>
                        绑定
                        <InputNumber onChange={(e) => {
                            setParams({
                                ...params,
                                bindExpiredText: e
                            })
                        }} max={90} value={bindExpiredText} disabled={bindExpired !== 'edit'} />
                        <div>天后，解除关系</div>
                    </Space>

                </div>,
            },
        },
        {
            label: '抢客设置',
            name: 'grabUserType',
            direction: 'vertical',
            onChange: (e) => {
                setParams({
                    ...params,
                    grabUserType: e.target.value,
                })
            },
            type: 'radio',
            select: {
                anyTime: <div>
                    随时可以抢客
                    <Popover content={<div>
                        举例：当推广员A绑定客户B时，其他推广员可随时通过分享推广链接等方式将客户B抢走。
                    </div>}>
                        <InfoCircleOutlined></InfoCircleOutlined>
                    </Popover >
                </div>,
                notAllow: <div>
                    不允许抢客
                    <Popover content={<div >
                        举例：当推广员A绑定客户B时，其他推广员无法抢走客户B。
                    </div>}>
                        <InfoCircleOutlined></InfoCircleOutlined>
                    </Popover >
                </div>,
                protect: <div>
                    <Space>
                        保护期
                        <InputNumber onChange={(e) => {
                            setParams({
                                ...params,
                                grabUserProtectDays: e
                            })
                        }} max={90} value={grabUserProtectDays} disabled={grabUserType !== 'protect'} />
                        <div>天内不可抢客</div>
                    </Space>

                    <Popover content={<div>
                        举例：当推广员A绑定客户B时，若设置保护期为7天，则在绑定后7天内其他推广员无法抢走客户B。
                    </div>}>
                        <InfoCircleOutlined></InfoCircleOutlined>
                    </Popover >
                </div>,
            },
        },
    ];


    return (
        <div style={{ fontSize: 28 }}>
            <Row>
                <Col span={18}>
                    <div style={{ paddingTop: 12 }}>
                        <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={data}></FormCondition>
                    </div>
                </Col>
                <FlxButton onOk={fetchRoleEdit}></FlxButton>
            </Row>
        </div>
    );
};

export default connect(({ institution, loading }) => ({
    loading: loading.models.institution,
}))(PlanForm);
